<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>鸿包惠</span>
      <div class="right">
      </div>
    </div> -->
		<div class="kong"></div>
    <div class="list">
			<div class="boxt">
				<div class="info">
					<span>挂牌鸿包：</span><input type="text" v-model="price" placeholder="请输入挂牌金额">
				</div>
			</div>
			<!-- <div class="boxt">
				<div class="info">
					<span>债事编号：</span><input type="text" v-model="debtnum" placeholder="请输入债事编号">
				</div>
			</div> -->
		 <div class="boxt" @click="show11 = true">
				<div class="info">
					<span>挂牌折扣：</span><input type="text" disabled v-model="zhi" placeholder="请选择折扣">
				</div>
			</div>
 
			<div class="btn">
				<button class="affirm" @click="chushou()" >确认</button>
				<button class="cancel" @click="back()">取消</button>
			</div>
		</div>
		

    <!-- 弹出选择 -->
     <yd-popup v-model="show11" position="center" width="90%">
        <div class="bodys">
            <div v-for="(item,index) in val" :key="index" @click="clickshui(item)"><span>{{item}}</span><span>折</span></div>
        </div>
    </yd-popup>
	</div>
</template>

<script>
import Vue from "vue";
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
Vue.component(CitySelect.name, CitySelect);
import District from "ydui-district/dist/jd_province_city_area_id";
export default {
  name: "sell",
  data() {
    return {
      isshow: false,
      show1: false,
      show11:false,
      val:[],
      zhi:'',
      price:'',
      // debtnum:'',
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
   
    list(){
      let self = this;
      let url ="/api/system";
      self.httpGet(url,function(res) {
				if (res.code === 200) {
					 self.sale_max =parseInt(res.data[0].sale_max);
           self.sale_min =parseInt(res.data[0].sale_min);
            let values = []
           for(var i =self.sale_min ;i<=self.sale_max;i++){
             values.push(i)
           }
           self.val = values;
           console.log("val",self.val)
        }
      })
    },
    clickshui(v){
      this.show11 = false;
      this.zhi = v;
      console.log(v)
    },
    //出售
    chushou(){ 
      let self = this;
      let url = "/api/sale/sale"; 
      if(!this.price){
        this.$dialog.toast({mes:'请输入金额'});
        return
      }
      // if(!this.debtnum){
      //   this.$dialog.toast({mes:'请输入债权编号'});
      //   return
      // }
      if(!this.zhi){
        this.$dialog.toast({mes:'请选择折扣'});
        return
	  	}
			self.httpPost(url,{user_id:this.myid,token:this.token,price:this.price,discount:this.zhi},function(res) {
				if (res.code == 200) {
          self.$dialog.toast({mes:res.msg});
          setTimeout(() => {
            self.$router.go(-1);
          }, 1000);
				}else{
					self.$dialog.toast({mes:res.msg});
        }
      })
    }
  },
  created(){
    document.title = "挂牌出售";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
    this.list()
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.03rem;
  position: fixed;
}
.kong {
  width: 100%;
  /* height: 0.92rem; */
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.list {
  width: 100%;
  padding: 0 0.3rem;
  background: #fff;
}
.list .boxt {
  width: 100%;
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
}
.list .boxt .info {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.list .boxt .info span {
  font-size: 0.28rem;
  color: #707070;
}
.boxt span {
  font-size: 0.28rem;
  color: #333;
}
.boxt input {
  border: none;
  flex: 1;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9e9e9e;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #9e9e9e;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9e9e9e;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9e9e9e;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.2rem 0.2rem;
}
.btn .affirm {
  width: 1.18rem;
  height: 0.6rem;
  background: #e63f3f;
  border: none;
  border-radius: 5px;
  font-size: 0.28rem;
  color: #fff;
}
.btn .cancel {
  width: 1.18rem;
  height: 0.6rem;
  background: #e7e6e9;
  border: none;
  border-radius: 5px;
  font-size: 0.28rem;
  color: #adadad;
  margin-left: 0.5rem;
}
.title {
  margin-top: 0.6rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.bodys{
    background: white;
    border-radius: 5px;
    padding: .3rem;
    max-height: 6rem;
    overflow: hidden;
    overflow-y: scroll;
}
.bodys div{
    color: #333;
    line-height:.8rem;
    border-bottom: 1px solid #dfdfdf;
    font-size: .3rem;
    padding-left: .2rem;
    display: flex;
    justify-content: space-between;
}
.fexx div p{
    margin-top: .1rem;
}
</style>
<style>
.yd-cell-item {
  padding: 0;
	height: 1rem;
	padding-bottom:.12rem;
}
.yd-cell-left{
	align-items: flex-end;
}
.yd-cell-right{
	align-items: flex-end;
	padding-bottom:.1rem;
}
.yd-cell-right input[type=text]{
	height:.38rem;
	align-items: flex-end;
  font-size:.25rem;
}
</style>



